<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        img {
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="" v-model="allChecked" @change="checkAll">
                        全选
                    </td>
                    <td>
                        商品名称
                    </td>
                    <td>图片</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>总价</td>
                    <td>操作</td>
                </tr>
                <!-- <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>
                        SK2
                    </td>
                    <td>
                        <img src="http://img13.360buyimg.com/n7/jfs/t1/179804/21/2812/138861/60954151E09f754c1/9706cf7d3f82ce19.jpg" alt="">
                    </td>
                    <td>1590.00</td>
                    <td>
                        <button class="btn btn-default">-</button>
                        1
                        <button class="btn btn-primary">+</button>
                    </td>
                    <td>1590.00</td>
                    <td>
                        <button type="button" class="btn btn-danger">删除</button>
                    </td>
                </tr> -->
                <tr v-for="(item, index) in goods" :key="item.id">
                    <td>
                        <input type="checkbox" name="" id="" v-model="item.checked" @change="changeOne">
                    </td>
                    <td>
                        {{ item.name }}
                    </td>
                    <td>
                        <img :src="item.img" alt="">
                    </td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button class="btn btn-default" @click="sub(index)">-</button>
                        {{ item.num }}
                        <button class="btn btn-primary"  @click="add(index)">+</button>
                    </td>
                    <td>{{ (item.num * item.price).toFixed(2) }}</td>
                    <td>
                        <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
                    </td>
                </tr>
                <tr v-if="goods.length === 0">
                    <td colspan="7">暂无数据</td>
                </tr>
                <tr>
                    <td colspan="7">
                        总价 {{ total }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 商品数据-从后台取到的数据
        const goods = [
            {
                id: 1,
                name: 'SK2',
                price: 1590.00,
                num: 1,
                img: "http://img13.360buyimg.com/n7/jfs/t1/179804/21/2812/138861/60954151E09f754c1/9706cf7d3f82ce19.jpg"
            },
            {
                id: 2,
                name: 'Watch',
                price: 1799.9,
                num: 1,
                img: "http://img13.360buyimg.com/n7/jfs/t1/195549/7/1383/147340/609247adE3a47f0f5/bf2a9f6dbd18a0d5.jpg"
            },
            {
                id: 3,
                name: '前男友面膜',
                price: 1059.99,
                num: 1,
                img: "http://img14.360buyimg.com/n7/jfs/t1/181060/34/2821/163555/60954cddE1af45f9c/8f7e11f4fc884da8.jpg"
            },
            {
                id: 4,
                name: 'ipad',
                price: 5799,
                num: 1,
                img: "http://img11.360buyimg.com/n7/jfs/t1/161452/24/15900/88869/6063ddfeE258a392b/008f0f5fdb2c4a42.jpg"
            }
        ]
        new Vue({
            el: '#app',
            mounted() {
                // 先让goods加一个checked属性
                goods.forEach(item => {
                    item.checked = false
                })
                // 给goods每个商品增加了一个checked属性之后赋值
                this.goods = goods
            },
            // 定义数据
            data: {
                goods: [],
                allChecked: false
            },
            computed: {
                total() {
                    let sum = 0
                    // 选中商品的价格之和
                    this.goods.forEach(item => {
                        if(item.checked) {
                            sum = item.num * item.price + sum
                        }
                    })
                    return sum
                    // return this.goods.reduce((val,next)=>{
                    //     return next.checked?val += next.num * next.price: val
                    // },0)
                }
            },
            methods: {
                checkAll() {
                    // 让下面所有商品的复选框状态与全选按钮的状态保持一致
                    this.goods.forEach(item => {
                        item.checked = this.allChecked
                    })
                },
                changeOne() {
                    // 所有商品选中，全选才被选中，只要有一个商品未选中 全选取消
                    this.allChecked = this.goods.every(item => item.checked)
                },
                // 数量自减
                sub(index) {
                    this.goods[index].num--
                    if(this.goods[index].num < 1) {
                        this.goods[index].num = 1
                    }
                },
                // 数量自增
                add(index) {
                    this.goods[index].num++
                    if(this.goods[index].num > 5) {
                        this.goods[index].num = 5
                    }
                },
                // 删除某个商品
                del(index) {
                    this.goods.splice(index, 1)
                }
            }
        })
    </script>
</body>
</html>